<template>
    <div>
        <div class="tabelTop">
            <h6>{{center.RoomName}}</h6>
            <!-- 闹钟倒计时 -->
            <div class="times">
                <!-- 圆圈 -->
                <canvas v-timeCan="{a:center.RestHops,b:center.DjsTime}"></canvas>
                <!-- 计数 -->
                <li >{{center.RestHops}}</li>
            </div>
            <p class="allMoney">桌面上的筹码:{{allChips[0]}}</p>
        </div>
        <div class="nx">
            <div class="vivwShow" @mouseover="BriefTbale=true" @mouseout="BriefTbale=false" >
                <!-- 路单画布 -->
                <Luand  class="LuDanCanvas" :model.sync="ludan" ref="luandSon" @postMessage="postMessage"></Luand>
                <!-- 结算中 -->
                <transition enter-active-class="animated bounceInDown">
                    <div class="OverVivw"  v-show="center.CurrState==5">
                        <div class="toOver"></div>		
                    </div>
                </transition>
                <!-- 洗牌中 -->
                <transition enter-active-class="animated bounceInDown">
                        <div class="OverVivw" v-show="center.CurrState!=5&&center.CurrState!=0&&center.CurrState!=2">
                            <div class="toWash"></div>		
                        </div>
                </transition>
                <!-- 暂停中 -->
                <transition enter-active-class="animated bounceInDown">
                    <div class="OverVivw" v-show="center.CurrState==0">
                        <div class="toLogin"></div>		
                    </div>
                </transition>
                <!-- 选择进入倍数房间列表 -->
                <transition enter-active-class="animated flipInX">
                    <div class="BriefContent" v-show="BriefTbale&&center.current!==false">
                        <a href="javascript:;" v-for="(gameTbale,idx) in gameLi" @click="goRoom(gameTbale[0],gameTbale[1])" :key=idx>
                            <p>最低：<span>{{gameTbale[0]}}</span></p>
                            <p>最高：<span>{{gameTbale[1]}}</span></p>
                        </a>
                    </div>
                </transition>
            </div>
            <div class="vivwFloor">
                <p><span>总人数：{{center.OnlineNum?center.OnlineNum:center.PlayerNum}}</span></p>
                <p class="banker">
                    <span>庄</span>{{Chips[0][0]}}
                </p>
                <p class="banker2">
                    <span>闲</span>{{Chips[1][0]}}
                </p>
                <p class="banker3">
                    <span>和</span>{{Chips[2][0]}}
                </p>
                <p class="goGame" @click="BriefTbale=true"></p>
            </div>
        </div>
    </div>
</template>
<script>

import Luand from "@/components/Ludan.vue"
export default {
    name:"vx",
    props:["keys"],
	data(){
		return {
			ulTop:0,
			BriefTbale:false,
			canvasBox:{x:0,y:0},
			Set:null
		}
	},
	computed:{
		center(){
			return this.$store.getters.Hall.RoomArray[this.keys];
		},
		Chips(){
			let a=this.center.ChipsSum;
			let b=a.split(",");
			for(let i=0;i<b.length;i++){
				b[i]=b[i].split("/");
				b[i][0]=parseInt(b[i][0]);
				b[i][1]=parseInt(b[i][1]);
			}
			return b;
		},
		allChips(){
			let a=this.Chips;
			let b=[0,0];
			a.forEach(array=>{
				b[0]+=array[0]*1;
				b[1]+=array[1]*1;
			})
			return b;
		},
		gameLi(){
			return this.$store.getters.XH;
		},
		ludan(){
			let a={models:this.center.GType ,data:this.center.LuDan }
			return a;
		}
	},
	watch:{
		"center.CurrState":function(newVal,oldVal){
			if(newVal!=oldVal){
				if(newVal==2){
					this.$store.commit('initTableRoom',this.keys);
					this.setTime();
				}
			}
		}
	},
	directives:{
		timeCan:{
			bind(x,bind){
				x.width=100;
				x.height=100;
				var star=bind.value.a*(-360/bind.value.b);
				var canvas=x.getContext("2d");
				canvas.strokeStyle="#d6b938";
				canvas.fillStyle="transparent";
				canvas.lineWidth=20;
				canvas.arc(50,50,50,-90*Math.PI/180,(star-90)*Math.PI/180,true)
				canvas.fill()
				canvas.stroke();
			},
			update(x,bind){
				x.width=100;
				x.height=100;
				if(bind.oldValue!=bind.value){
					var star=bind.value.a*(360/bind.value.b);
					var canvas=x.getContext("2d");
					canvas.clearRect(0,0,25,25);
					canvas.beginPath();
					canvas.strokeStyle="#d6b938";
					canvas.fillStyle="transparent";
					canvas.lineWidth=20;
					canvas.arc(50,50,50,-90*Math.PI/180,(star-90)*Math.PI/180,true)
					canvas.fill()
					canvas.stroke();
				}
			}
		}
	},
	components:{
		Luand
	},
	methods:{
		goRoom(Low,Top){
			window.userSocket.uSend('{"ActType":5,"ConnectionId":"","GTableId":'+this.center.TId+',"ErrorCode":10000,"UId":"' + UserId + '","RandCode":"' + RandCode + '","GT":'+this.center.GType+'}')
			this.$router.replace({name:"room",params:{Low,Top}})
		},
		setTime(){
			this.Set= setInterval(()=>{
					if(this.center.RestHops==0){
						this.$store.commit("setRoomStatus",{id:this.keys,data:5});
						clearInterval(this.Set)
					}else{
							this.$store.commit("setTimes",this.keys)
					}
			},1000)
		},
		postMessage(msg){
			let a=msg;
			a.room=this.keys;
			this.$emit('postMessage',a)
		}
	},
	mounted(){
		this.canvasBox.x=document.getElementsByClassName('vivwShow')[0].clientWidth;
		this.canvasBox.y=document.getElementsByClassName('vivwShow')[0].clientHeight;
		if(this.center.CurrState==2)
			this.setTime();
	},
	beforeDestroy(){
		clearInterval(this.Set)
	}
}
</script>
